<template>
  <base-nav></base-nav>
  <div class="page-content">
    <div class="container">
      <div class="container-content">
        <div class="wrap">
          <div class="section-1">
            <div>您当前还未进行实名制认证，无法使用合同签署功能，请先完成实名制认证。</div>
            <div>Description lorem ipsum dolor sit amet, consectetur adipiscing elit, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
          </div>
          <!-- formData:{{ formData }} verifySuccess:{{ verifySuccess }} isAllFiledVerifySuccess:{{ isAllFiledVerifySuccess }} -->
          <div class="section-2">
            <base-filed label="姓名" v-model="formData.xxx1" v-model:verifySuccess="verifySuccess.xxx1" :rule="rule.xxx1" ref="refFiled1"></base-filed>
            <base-filed label="身份证号" v-model="formData.xxx2" v-model:verifySuccess="verifySuccess.xxx2" :maxlength="18" :rule="rule.xxx2" ref="refFiled2"></base-filed>
            <base-filed label="手机号" v-model="formData.xxx3" v-model:verifySuccess="verifySuccess.xxx3" :maxlength="11" type="number" :rule="rule.xxx3" ref="refFiledTel">
              <!-- 右侧内容 -->
              <template v-slot:right>
                <div class="tip-area" @click="showTelTip">
                  <img src="/assets/sigh.png" alt="" />
                </div>
              </template>
            </base-filed>
            <base-filed label="验证码" v-model="formData.xxx4" v-model:verifySuccess="verifySuccess.xxx4" type="number" :rule="rule.xxx4" ref="refFiled4">
              <!-- 右侧内容 -->
              <template v-slot:right>
                <div class="code-area">
                  <span v-show="captchaInfo.msgShow" class="get-code" @click="getMesCode('refForm')">获取验证码</span>
                  <span v-show="!captchaInfo.msgShow" class="countdown">{{ captchaInfo.msgCount }}s</span>
                </div>
              </template>
            </base-filed>
          </div>
          <div class="section-3" :class="{ success: isAllFiledVerifySuccess && !confirmLoading }">
            <!-- <div class="btn btn-next" @click="next">认证-成功</div> -->

            <template v-if="confirmLoading">
              <div class="btn btn-next">认证中 ...</div>
            </template>
            <template v-else>
              <div class="btn btn-next" @click="next">认证</div>
            </template>
          </div>

          <div class="section-3 success">
            <div class="btn btn-next" @click="nextFail">认证-失败</div>
          </div>

          <div class="section-3 success">
            <div class="btn btn-next" @click="echo">非首次 , 回带用户信息</div>
          </div>

          <div class="section-3 success">
            <div class="btn btn-next" @click="jump">跳转签署意愿认证</div>
          </div>
          <div class="section-3 success">
            <div class="btn btn-next" @click="jumpBaidu">提示</div>
          </div>
          <div class="section-3 success">
            <div class="btn btn-next" @click="completeSign(1)">签署成功，reason传空</div>
          </div>
          <div class="section-3 success">
            <div class="btn btn-next" @click="completeSign(2)">签署失败，reason传failure，带details</div>
          </div>
          <div class="section-3 success">
            <div class="btn btn-next" @click="completeSign(3)">退出签署，reason传cancel</div>
          </div>
          <div class="section-3 success">
            <div class="btn btn-next">完成原生&h5调试-更新第4版</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-footer">此服务能力由福建正孚软件有限公司提供</div>
  </div>
</template>

<script setup>
import { completeSigningWithError } from '@cis/mybmw-bridge-digital-signature'
import { computed, nextTick, ref } from 'vue'
import { useFunctional, useCaptcha } from '@/utils/useHooks'

import { useRouter } from 'vue-router'
const router = useRouter()

function completeSign(type) {
  let strategy = {
    1: () => {
      completeSigningWithError({ reason: '' })
    },
    2: () => {
      completeSigningWithError({ reason: 'failure', details: '服务端放回失败的动态文本结果' })
    },
    3: () => {
      completeSigningWithError({ reason: 'cancel' })
    },
  }
  strategy[type]()
}

let { captchaInfo, startCountdown } = useCaptcha()
let { dialog, message } = useFunctional()

let formData = ref({})
let verifySuccess = ref({})
let isAllFiledVerifySuccess = computed(() => {
  let { xxx1, xxx2, xxx3, xxx4 } = verifySuccess.value
  return xxx1 && xxx2 && xxx3 && xxx4
})
let rule = ref({
  xxx1: [{ required: true, message: '请输入姓名' }],
  xxx2: [
    { required: true, message: '请输入身份证号' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号' },
  ],
  xxx3: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9][0-9]\d{8}$/, message: '请输入正确的手机号' },
  ],
  xxx4: [{ required: true, message: '请输入验证码' }],
})
function showTelTip() {
  dialog({
    title: '手机号',
    text: `
      1、覆盖范围：中国移动、中国联通、中国电信运营商办理的手机号码<br>
      2、新卡支持核验时间：移动号码当月办理次月支持核验，电信联通号码当周办理次周支持核验<br>
      3、信息核验：姓名、身份证号将与运营商手机号户主实名信息进行对比验证，若信息错误将核验失败<br>
      不支持核验：<br>
      1、虚拟运营商号段<br>
      2、异网转入<br>
      3、未实名手机号
    `,
    confirmButtonText: '知道了',
  })
}

let refFiledTel = ref()
let refFiled1 = ref()
let refFiled2 = ref()
let refFiled4 = ref()
// 获取验证码
function getMesCode() {
  if (!verifySuccess.value.xxx3) {
    refFiledTel.value.getVerifyResult()
    return
  }
  startCountdown()
  //发送验证码
  // sendCaptcha({
  //   phone: formData.value.tel,
  // }).then(() => {
  //   ElMessage.success('已发送验证码')
  // })
}

function toVerifyALLFiled() {
  toVerify3Filed()
  refFiled4.value.getVerifyResult()
}
function toVerify3Filed() {
  refFiledTel.value.getVerifyResult()
  refFiled1.value.getVerifyResult()
  refFiled2.value.getVerifyResult()
}

function next() {
  if (!isAllFiledVerifySuccess.value) {
    toVerifyALLFiled()
    return
  }
  send()
  console.log('请求')
}

let confirmLoading = ref(false)
function send() {
  confirmLoading.value = true
  setTimeout(() => {
    confirmLoading.value = false
    router.push('/sign')
  }, 2000)
}
function nextFail() {
  dialog({
    iconType: 'error',
    title: '认证失败',
    text: `失败原因服务下发`,
    confirmButtonText: '重新认证',
  })
}

function jump() {
  router.push('/intent')
}

function jumpBaidu() {
  message('提示一下')
  // location.href = 'https://www.mi.com/'
}

function echo() {
  formData.value = {
    xxx1: '叶大凡',
    xxx2: '350121199504150415',
    xxx3: '17689276287',
  }
  nextTick(toVerify3Filed)
}
</script>

<style scoped lang="scss">
.container {
  min-height: calc(100vh - var(--nav-heigth));
  box-sizing: border-box;
  .container-content {
    padding-bottom: 40px;
  }
}
.container-footer {
  margin-top: -40px;
  height: 40px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  padding: 15px;
  box-sizing: border-box;

  .section-1 {
    font-size: 12px;
    color: black;
  }
  .section-2 {
    margin-top: 30px;
  }
  .section-3 {
    margin-top: 32px;
    .btn {
      transition: all var(--transition-time);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      border-radius: 2px;
      font-size: 14px;
    }
    .btn-next {
      color: white;
      background-color: rgba(153, 153, 153, 1);
    }
  }
  .success {
    .btn-next {
      color: white;
      background-color: rgba(0, 0, 0, 1);
    }
  }
}
.tip-area {
  position: absolute;
  top: 50%;
  right: 0;
  height: 40px;
  width: 40px;
  transform: translate(0, -50%);
  // background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 18px;
    height: 18px;
    display: block;
  }
}
.code-area {
  height: 100%;
  position: absolute;
  top: 50%;
  right: calc((40px - 18px) / 2);
  transform: translate(0, -50%);
  // background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  .get-code {
    color: rgba(24, 100, 208, 1);
  }
  .countdown {
    color: black;
  }
}
</style>
